<template>
	<view class="page-view page-image">
		<RcNavigation title="企服联聘" bgColor="transparent" />

		<view class="flex-1" style="overflow: hidden">
			<scroll-view scrollY="true" style="height: 100%">
				<view class="main-view">
					<image class="logo" src="@/static/images/public/logo.png" />
					<text class="label">欢迎来到企服联聘</text>

					<view class="form-card">
						<image class="icon" src="@/static/images/public/phone.png" />
						<text class="area-code">+86</text>
						<input
							v-model="formData.phone"
							class="input"
							type="text"
							placeholder="手机号"
						/>
					</view>
					<view v-if="isPwdLogin" class="form-card">
						<image class="icon" src="@/static/images/public/lock.png" />
						<input
							v-model="formData.password"
							class="input"
							type="text"
							:password="isPassword"
							placeholder="请输入密码"
						/>
						<image
							v-if="isPassword"
							class="icon"
							src="@/static/images/public/show.png"
							@click="switchPassword"
						/>
						<image
							v-else
							class="icon"
							src="@/static/images/public/hide.png"
							@click="switchPassword"
						/>
					</view>
					<view v-else class="form-card">
						<image class="icon" src="@/static/images/public/safety.png" />
						<input
							v-model="formData.code"
							class="input"
							type="text"
							placeholder="验证码"
						/>
						<view
							class="send-button text-700-526"
							@click="sendCode(formData.phone, 1)"
							>{{ codeText }}</view
						>
					</view>

					<view class="button" @click="submit">登录</view>

					<view class="link-view">
						<text @click="toRegisterPage">免费注册</text>
						<text @click="switchLoginType">{{
							isPwdLogin ? "验证码登录" : "密码登录"
						}}</text>
					</view>

					<view class="pact-view" @click="selectPact">
						<view v-if="!formData.isCheck" class="check" />
						<view v-else class="check-el flex-c">
							<image class="w-20 h-14" src="@/static/images/user/select.png" />
						</view>
						<text>
							我已阅读<text class="pact" @click="toPactPage">
								《用户协议》
							</text>
						</text>
					</view>
				</view>

				<view class="wechat-button" @click="userLogin">
					<view class="icon-view flex-c">
						<image class="w-56 h-47" src="@/static/images/public/wechat.png" />
					</view>
					<text class="text">微信直接登录</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import type { UserData } from "@/types/api.d.ts";

import useCode from "@/hooks/use-code.ts";
import { useUserStore } from "@/stores/user.ts";

import RcNavigation from "@/components/navigation.vue";

const { codeText, sendCode, clearCodeTimer } = useCode();

interface RouteQuery {
	role: "0" | "1";
}

// 当前角色
let role = "0";

const userStore = useUserStore();

const isPwdLogin = ref(true);

const isDisabled = ref(false);
const isPassword = ref(true);

const formData = reactive({
	phone: "",
	code: "",
	password: "",
	isCheck: false,
});

onLoad((option) => {
	initParams(option as RouteQuery);
});

onUnload(() => {
	clearCodeTimer();
});

// 传参初始化
const initParams = (option: RouteQuery) => {
	role = option.role || "0";
};

const switchPassword = () => {
	isPassword.value = !isPassword.value;
};

const switchLoginType = () => {
	isPwdLogin.value = !isPwdLogin.value;
};

const selectPact = () => {
	formData.isCheck = !formData.isCheck;
};

const formVerify = () => {
	if (isDisabled.value) return true;

	if (formData.phone === "") {
		uni.$u.toast("请输入手机号");
		return true;
	}

	if (formData.password === "" && isPwdLogin.value) {
		uni.$u.toast("请输入密码");
		return true;
	}

	if (formData.code === "" && !isPwdLogin.value) {
		uni.$u.toast("请输入验证码");
		return true;
	}

	if (!formData.isCheck) {
		uni.$u.toast("请勾选用户协议");
		return true;
	}

	return false;
};

const submit = async () => {
	if (formVerify()) return;

	isDisabled.value = true;
	uni.showLoading({ title: "加载中...", mask: true });

	const url = isPwdLogin.value ? "/user/login" : "/user/mobilelogin";

	let data = {};

	if (isPwdLogin.value) {
		data = {
			role,
			account: formData.phone,
			password: formData.password,
		};
	} else {
		data = {
			role,
			mobile: formData.phone,
			captcha: formData.code,
		};
	}

	const res = await uni.$u.post<UserData>(url, data);

	if (res.code === 1) {
		userStore.setUserInfo(res.data);
		uni.setStorageSync("token", res.data.userinfo.token);
		uni.hideLoading();
		uni.switchTab({ url: "/pages/tab-page/tab-1/tab-1" });
	} else {
		uni.$u.toast(res.msg);
	}

	isDisabled.value = false;
};

const toPactPage = () => {
	uni.navigateTo({ url: "/pages/user/pact/pact" });
};

const toRegisterPage = () => {
	let url = "";

	if (role === "0") {
		url = "/pages/user/register/register";
	} else {
		url = "/pages/user/indus-tag/indus-tag";
	}

	uni.navigateTo({ url });
};
function userLogin() {
	// uni.getUserProfile({
	//   desc: 'Wexin', // 必填，声明获取用户个人信息后的用途
	//   success: (res) => {
	//     console.log("🚀 ~ getUserInfo ~ res:", res)
	//   },
	//   fail: (err) => {
	//     console.log('用户信息获取失败', err);
	//   }
	// });
	uni.login({
		provider: "weixin",
		success: async (e) => {
			const res = await uni.$u.post("/user/wechatlogin", { wxcode: e.code });
			console.log(res);
			if (res.code === 1) {
				userStore.setUserInfo(res.data.userinfo);
				uni.setStorageSync("token", res.data.userinfo.token);
				uni.$u.toast("登录成功");
				setTimeout(() => {
					uni.switchTab({ url: "/pages/tab-page/tab-1/tab-1" });
				}, 1000);
			} else {
				uni.$u.toast(res.msg);
			}

			isDisabled.value = false;
		},
		fail: (err) => {
			console.log("登录失败", err);
		},
	});
}
</script>

<style lang="scss">
page {
	background-color: $page-color-2;
}
</style>

<style lang="scss" scoped>
.page-view {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.main-view {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 900rpx;
	margin: 0 30rpx;
	padding: 0 58rpx;
	margin-top: 180rpx;
	border-radius: 32rpx;
	background-color: #fff;

	.logo {
		margin-top: 45rpx;
		margin-bottom: 28rpx;
		width: 171rpx;
		height: 156rpx;
	}

	.label {
		margin-bottom: 48rpx;
		color: #333333;
		font-size: 36rpx;
		font-weight: bold;
	}

	.button {
		width: 100%;
		height: 90rpx;
		margin-top: 16rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		line-height: 90rpx;
		background: #1269ff;
		border-radius: 10rpx;
		box-shadow: 0rpx 3rpx 39rpx 1rpx rgba(31, 119, 245, 0.27);
	}
}

.form-card {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100rpx;
	margin-bottom: 30rpx;
	padding: 0 24rpx;
	background: #f4f8fb;
	border-radius: 10rpx;

	.icon {
		width: 40rpx;
		height: 40rpx;
	}

	.input {
		flex: 1;
		padding: 0 24rpx;
		font-size: 32rpx;
	}

	.area-code {
		margin-left: 24rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
	}

	.send-button {
		width: 180rpx;
		padding-left: 20rpx;
		text-align: center;
		border-left: 1rpx solid $border-color-1;
	}
}

.link-view {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 37rpx;
	margin-bottom: 67rpx;
	color: #9c9c9c;
	font-weight: 400;
	font-size: 30rpx;
}

.pact-view {
	display: flex;
	align-items: center;
	color: #9c9c9c;
	font-size: 30rpx;
	font-weight: 400;

	.check {
		width: 26rpx;
		height: 26rpx;
		margin-right: 8rpx;
		border-radius: 50%;
		border: 2rpx solid #9c9c9c;
	}

	.check-el {
		width: 26rpx;
		height: 26rpx;
		margin-right: 8rpx;
		border-radius: 50%;
		background-color: $bg-color-2;
	}

	.pact {
		color: #1269ff;
	}
}

.wechat-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 180rpx;

	.icon-view {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1rpx solid $border-color-5;
	}

	.text {
		padding: 20rpx 0;
		color: #999999;
		font-size: 24rpx;
		font-weight: 500;
	}
}
</style>
